<template>

   <!-- 开通二级展示页 -->
  <div style="background-color:#fff">
    <a-radio-group default-value="a" button-style="solid" style="margin-left: 15px;padding: 10px 0" @change="handlechangeRadio">
      <a-radio-button value="a"> 图表 </a-radio-button>
      <a-radio-button value="b"> 表格 </a-radio-button>
    </a-radio-group>

    <!--  基础柱状图 -->
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" style="padding-top:0px" v-show="openingIndexType">
      <a-row :gutter="24" type="flex" style="background-color:#F0F2F5;">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="快开" :style="{ height: '100%' }">
            <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="selectTime" @change="kkonChange" class="rangePicker" />
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }" >
              <a-tab-pane tab="平均时长" key="1">             
                <FastOpenLongChart :startTime="startTime+' 00:00:00'" :endTime="endTime+' 23:59:59'"></FastOpenLongChart>            
              </a-tab-pane>
              <a-tab-pane tab="回单" key="2">             
                <FastOpenRateChart :startTime="startTime+' 00:00:00'" :endTime="endTime+' 23:59:59'"></FastOpenRateChart>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="查勘" :style="{ height: '100%' }">
            <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="selectTime" @change="ckonChange" class="rangePicker" />
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }" >
              <a-tab-pane tab="平均时长" key="1">
                <SurveyLongChart :ckstartTime="ckstartTime+' 00:00:00'" :ckendTime="ckendTime+' 23:59:59'" ></SurveyLongChart>
              </a-tab-pane>            
              <a-tab-pane tab="回单" key="3">
                <SurveyRateChart :ckstartTime="ckstartTime+' 00:00:00'" :ckendTime="ckendTime+' 23:59:59'"></SurveyRateChart> 
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" style="padding-top:0px" v-show="openingIndexType">
      <a-row :gutter="24" type="flex" style="background-color:#F0F2F5;">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="建设" :style="{ height: '100%' }">
            <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="selectTime" @change="jsonChange" class="rangePicker" />
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
              <a-tab-pane tab="平均时长" key="1">
                <FastBuildLongChart :jsstartTime="jsstartTime+' 00:00:00'" :jsendTime="jsendTime+' 23:59:59'" ></FastBuildLongChart>
              </a-tab-pane>            
              <a-tab-pane tab="回单" key="3">
                <FastBuildRateChart :jsstartTime="jsstartTime+' 00:00:00'" :jsendTime="jsendTime+' 23:59:59'" ></FastBuildRateChart>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="合同签订" :style="{ height: '100%' }">
            <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="selectTime" @change="htonChange" class="rangePicker" />
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
              <a-tab-pane tab="平均时长" key="1">
                <ContractLongChart :htstartTime="htstartTime+' 00:00:00'" :htendTime="htendTime+' 23:59:59'" ></ContractLongChart>
              </a-tab-pane>            
              <a-tab-pane tab="回单" key="3">
                <ContractRateChart :htstartTime="htstartTime+' 00:00:00'" :htendTime="htendTime+' 23:59:59'" ></ContractRateChart>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
      </a-row>
    </div>


      <div class="antd-pro-pages-dashboard-analysis-twoColLayout" style="padding-top:0px" v-show="openingIndexType">
      <a-row :gutter="24" type="flex" style="background-color:#F0F2F5;">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="全流程开通" :style="{ height: '100%' }">
            <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="selectTime" @change="allonChange" class="rangePicker" />
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
              <a-tab-pane tab="平均时长" key="1">
                <WholeProcessLongChart :allstartTime="allstartTime+' 00:00:00'" :allendTime="allendTime+' 23:59:59'" ></WholeProcessLongChart>
              </a-tab-pane>            
              <a-tab-pane tab="回单" key="3">
                <WholeProcessRateChart :allstartTime="allstartTime+' 00:00:00'" :allendTime="allendTime+' 23:59:59'" ></WholeProcessRateChart>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
       
      </a-row>
    </div>
    <!-- 二级表格 -->
    <div v-show="!openingIndexType">
      <SecondOpenTable v-if="showTable"></SecondOpenTable>
    </div>
   
  </div>
</template>

<script>
import { getNowTime, getNowFormatDate } from '@/utils/util'
import { } from '@/api/public'
import moment from 'moment'
import Vue from 'vue'
import SecondOpenTable from '@/views/analysisManage/opening/secondLevelTable/secondOpenTable'
import FastOpenLongChart from '@/views/analysisManage/opening/secondLevelChart/fastOpenLongChart'
import FastOpenRateChart from '@/views/analysisManage/opening/secondLevelChart/fastOpenRateChart'
import SurveyLongChart from '@/views/analysisManage/opening/secondLevelChart/surveyLongChart'
import SurveyRateChart from '@/views/analysisManage/opening/secondLevelChart/surveyRateChart'
import FastBuildLongChart from '@/views/analysisManage/opening/secondLevelChart/fastBuildLongChart'
import FastBuildRateChart from '@/views/analysisManage/opening/secondLevelChart/fastBuildRateChart'
import ContractLongChart from '@/views/analysisManage/opening/secondLevelChart/contractLongChart'
import ContractRateChart from '@/views/analysisManage/opening/secondLevelChart/contractRateChart'
import WholeProcessLongChart from '@/views/analysisManage/opening/secondLevelChart/wholeProcessLongChart'
import WholeProcessRateChart from '@/views/analysisManage/opening/secondLevelChart/wholeProcessRateChart'
export default {
  name: 'Analysis',
  components: {FastBuildRateChart,FastBuildLongChart,SecondOpenTable,
         FastOpenLongChart,FastOpenRateChart,SurveyLongChart,
         SurveyRateChart,ContractLongChart,ContractRateChart,WholeProcessLongChart,WholeProcessRateChart},
  data() {
    return {
      showTable:false,
      infoData: {},
      selectTime: '',
      startTime: '',
      ckstartTime: '',
      jsstartTime: '',
      endTime: '',
      ckendTime: '',
      jsendTime: '',
      htstartTime:'',
      htendTime: '', 
      allstartTime:'',
      allendTime: '',
      openingIndexType: true, //图表切换
      loading: false,   
    }
  },
  created() {
    let arr = getNowTime()
    this.startTime = arr[0]
    this.ckstartTime = arr[0]
    this.jsstartTime = arr[0]
    this.endTime = arr[1]
    this.ckendTime = arr[1]
    this.jsendTime = arr[1]
    this.htstartTime = arr[0]
    this.htendTime = arr[1]
    this.allstartTime = arr[0]
    this.allendTime = arr[1]
    this.selectTime = [moment(this.startTime), moment(this.endTime)]
   
  },
  mounted() {
   
  
  },
  methods: {
    moment,
    //图-表切换
    handlechangeRadio(e) {
      e.target.value == 'a' ? this.getAllChartInfo() : this.getAllTableInfo()
      this.openingIndexType = !this.openingIndexType
    },
    //图的数据
    getAllChartInfo() { 
      this.showTable = false
    },
    //表格
    getAllTableInfo() {
      this.showTable = true 
    },
    //快开时间选择时间选择
    kkonChange(dates, dateStrings) {
      this.startTime = dateStrings[0]
      this.endTime = dateStrings[1]   
    },
    //查勘时间选择时间选择
    ckonChange(dates, dateStrings) {
      this.ckstartTime = dateStrings[0]
      this.ckendTime = dateStrings[1]    
    },
    //建设时间选择时间选择
    jsonChange(dates, dateStrings) {
      this.jsstartTime = dateStrings[0]
      this.jsendTime = dateStrings[1]    
    },
     //合同时间选择时间选择
    htonChange(dates, dateStrings) {
      this.htstartTime = dateStrings[0]
      this.htendTime = dateStrings[1]    
    },
    //全流程时间选择时间选择
    allonChange(dates, dateStrings) {
      this.allstartTime = dateStrings[0]
      this.allendTime = dateStrings[1]    
    },

  },
}

</script>
<style lang="less" scoped>

//......................................................
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.rangePicker {
  width: 300px;
  position: absolute;
  right: 10px;
  line-height: 56px;
  z-index: 11;
}


</style>
